<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-cascades"></i> 我的培训 </el-breadcrumb-item>
                <el-breadcrumb-item></el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <el-row :gutter="20">
            <el-col :span="24">
                <el-row :gutter="20" class="mgb20">
                    <el-col :span="24" style="margin-left: 0px">
                        <el-card shadow="hover" :body-style="{ padding: '0px' }">
                            <div class="grid-content grid-con-1">
                                <i class="el-icon-lx-file grid-con-icon"></i>
                                <div class="grid-cont-right">
                                    <!-- <div style="margin-bottom: 10px">
                                        所有类目：
                                        <el-radio-group v-for="item in cardData" :key="item.id" style="margin-left: 10px">
                                            <el-radio-button>{{ item.category }}</el-radio-button>
                                        </el-radio-group>
                                    </div> -->
                                    <div>
                                        <!-- 培训类别：<el-select v-model="inquire.category" class="handle-select mr10">
                                            <el-option
                                                v-for="item in cardData"
                                                :key="item.id"
                                                :label="item.category"
                                                :value="item.category"
                                            >
                                            </el-option>
                                        </el-select> -->
                                        培训名称：<el-input
                                            v-model="userTrainingDto.training.trainingname"
                                            placeholder="培训名称"
                                            class="handle-input mr10"
                                            style="width: 200px"
                                        ></el-input>
                                        培训状态：<el-input v-model="userTrainingDto.training.status" class="handle-input mr10">
                                            <!-- <el-option v-for="item in statusData" :key="item" :label="item" :value="item"> </el-option> -->
                                        </el-input>

                                        <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
                                    </div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
        <el-card class="box-card" v-for="item in cardData" :key="item.id" style="margin-bottom: 20px">
            <el-row :gutter="20">
                <el-col :span="6"
                    ><div class="grid-content bg-purple">
                        <img :src="item.cover" width="375" height="170" style="margin: auto" />
                        <!-- {{ item.cover }} -->
                    </div></el-col
                >
                <el-col :span="16"
                    ><div class="grid-content bg-purple">
                        <table>
                            <tr>
                                课程名称：
                                {{
                                    item.trainingname
                                }}
                            </tr>
                            <tr>
                                课程描述：
                                {{
                                    item.introduction
                                }}
                            </tr>
                            <tr>
                                类型：
                                {{
                                    item.category
                                }}
                            </tr>
                            <tr>
                                难度：
                                {{
                                    item.score
                                }}
                            </tr>
                        </table>
                    </div></el-col
                >
                <el-col :span="2">
                    <div class="grid-content bg-purple">
                        <el-button type="primary" @click="goTrainingDetails(item.id)">进入培训</el-button>
                    </div>
                </el-col>
            </el-row>
        </el-card>
        <!-- <div class="pagination"> -->
            <!-- 分页组件 -->
            <!-- <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination> -->
            
        <!-- </div> -->
    </div>
</template>

<script>
import Schart from 'vue-schart';
import bus from '../common/bus';
import Pagination from '../../components/common/Pagination.vue';
export default {
    data() {
        return {
            cardData: [],
            statusData: ['0', '1', '2'],
            categoryData: [],
            inquire: {
                trainingname: '',
                status: ''
            },
            formInline: {
                page: 1,
                limit: 5
            },
            pageparm: {
                currentPage: 1,
                pageSize: 5,
                total: 5
            },
            query: {
                cover: '',
                trainingname: '',
                introduction: '',
                category: '',
                score: ''
            },
            user: {
                id: -1
            },
            userTrainingDto: {
                user: {
                    id: -1
                },
                training: {
                    trainingname: '',
                    status: ''
                }
            }
        };
    },
    // 注册组件
    components: {
        Pagination
    },
    created() {
        this.getData(this.formInline);
        this.user.id = localStorage.getItem('id');
        this.userTrainingDto.user.id = localStorage.getItem('id');
    },

    methods: {
        goTrainingDetails(id) {
            localStorage.setItem('trainingid', id), this.$router.push({ path: '/trainingDetails' });
        },

        getData(parameter) {
            this.pageparm.currentPage = this.formInline.page;
            this.pageparm.pageSize = this.formInline.limit;
            this.$axios
                .post('/api/trainings/findTrainingByUserId/', this.user)
                .then((res) => {
                    console.log(res);
                    this.cardData = res.data.data;
                    this.pageparm.total = res.data.data.total;
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        // 分页插件事件
        callFather(parm) {
            //子传父 当前页和每页大小
            this.formInline.page = parm.currentPage;
            this.formInline.limit = parm.pageSize;
            this.getData(this.formInline);
        },
        // // 分页导航
        // handlePageChange(val) {
        //     this.$set(this.pageparm, 'currentPage', val);
        //     //console.log(val);
        //     this.getData();
        // },
        // 触发搜索按钮
        handleSearch() {
            console.log(this.inquire);
            // this.$set(this.pageparm, 'currentPage', 1);
            // this.getData();
            this.$axios
                .post('/api/trainings/findTrainingBySearch/', this.userTrainingDto)
                .then((res) => {
                    if (res.data.code == 200) {
                        console.log(res);
                        this.cardData = res.data.data;
                        this.pageparm.total = res.data.data.total;
                    } else {
                        this.$message({
                            type: 'info',
                            message: res.data.msg
                        });
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        }
    }
};
</script>


<style scoped>
.handle-input {
    width: 200px;
    display: inline-block;
}
.el-row {
    margin-bottom: 20px;
}

.grid-content {
    display: flex;
    align-items: center;
    height: 150px;
}

.grid-cont-right {
    flex: 1;
    text-align: center;
    font-size: 14px;
    color: #999;
}

.grid-num {
    font-size: 30px;
    font-weight: bold;
}

.grid-con-icon {
    font-size: 50px;
    width: 150px;
    height: 150px;
    text-align: center;
    line-height: 150px;
    color: #fff;
}
.grid-con-1 .grid-con-icon {
    background: rgb(45, 140, 240);
}

.grid-con-1 .grid-num {
    color: rgb(45, 140, 240);
}

.grid-con-2 .grid-con-icon {
    background: rgb(100, 213, 114);
}

.grid-con-2 .grid-num {
    color: rgb(45, 140, 240);
}

.grid-con-3 .grid-con-icon {
    background: rgb(242, 94, 67);
}

.grid-con-3 .grid-num {
    color: rgb(242, 94, 67);
}

.user-info {
    display: flex;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 2px solid #ccc;
    margin-bottom: 20px;
}

.user-avator {
    width: 120px;
    height: 120px;
    border-radius: 50%;
}

.user-info-cont {
    padding-left: 50px;
    flex: 1;
    font-size: 14px;
    color: #999;
}

.user-info-cont div:first-child {
    font-size: 30px;
    color: #222;
}

.user-info-list {
    font-size: 14px;
    color: #999;
    line-height: 25px;
}

.user-info-list span {
    margin-left: 70px;
}

.mgb20 {
    margin-bottom: 20px;
}

.todo-item {
    font-size: 14px;
}

.todo-item-del {
    text-decoration: line-through;
    color: #999;
}

.schart {
    width: 100%;
    height: 300px;
}
</style>
